// 导入 common 样式文件
@import "common";

@baseFont: 50;

body {
  min-width: 320px;
  width: 15rem;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f2f2f2;
}

.search {
  display: flex;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15rem;
  height: (88rem / @baseFont);
  background-color: #ffc001;

  .search-classify {
    width: (44rem / @baseFont);
    height: (70rem / @baseFont);
    margin: (12rem / @baseFont) (24rem / @baseFont);
    background: url(../img/classify2x@36_60.png) no-repeat;
    background-size: (36rem / @baseFont) (60rem / @baseFont);
  }

  .search-bar {
    flex: 1;
    input {
      // input text 默认有20个字符的宽度, 可能会撑开父盒子, 注意设置宽度
      width: 100%;
      height: (66rem / @baseFont);
      border-radius: (33rem / @baseFont);
      background-color: #fff2cc;
      margin-top: (10rem / @baseFont);
      font-size: (25rem / @baseFont);
      padding-left: (55rem / @baseFont);
      color: #757575;
      // 修改搜索框的取消按钮位置
      &::-webkit-search-cancel-button {
        padding-right: (25rem / @baseFont);
      }
    }
  }

  .search-login {
    width: (44rem / @baseFont);
    height: (70rem / @baseFont);
    margin: (12rem / @baseFont) (24rem / @baseFont);
    background: url(../img/login2x@36_60.png) no-repeat;
    background-size: (36rem / @baseFont) (60rem / @baseFont);
  }
}

.banner {
  width: (750rem / @baseFont);
  height: (368rem / @baseFont); 
  img {
    width: 100%;
    height: 100%;
  }
}

.ad {
  display: flex;
  a {
    flex: 1;
    img {
      width: 100%;
    }
  }
}

.nav {
  width: (750rem / @baseFont);
  a {
    float: left;
    width: (150rem / @baseFont);
    height: (142rem / @baseFont);
    text-align: center;
    [class^="nav-img"] {
      width: (82rem / @baseFont);
      height: (82rem / @baseFont);
      background-image: url(../img/nav_sprites.png);
      background-repeat: no-repeat;
      background-size: (82rem / @baseFont) auto;
      margin: auto;
    }
  }
}

.nav-img-miaosha {
  background-position: 0 0;
}
.nav-img-chaoshi {
  background-position: 0 (-82rem / @baseFont);
}
.nav-img-pingou {
  background-position: 0 (-82rem / @baseFont * 2);
}
.nav-img-shuma {
  background-position: 0 (-82rem / @baseFont * 3);
}
.nav-img-jiadian {
  background-position: 0 (-82rem / @baseFont * 4);
}
.nav-img-shuiguo {
  background-position: 0 (-82rem / @baseFont * 5);
}
.nav-img-huiyuan {
  background-position: 0 (-82rem / @baseFont * 6);
}
.nav-img-qiandao {
  background-position: 0 (-82rem / @baseFont * 7);
}
.nav-img-lingquan {
  background-position: 0 (-82rem / @baseFont * 8);
}
.nav-img-gengduo {
  background-position: 0 (-82rem / @baseFont * 9);
}

.nav-title {
  font-size: (22rem / @baseFont);
  color: #333;
}

.tab {
  margin: auto;
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: (750rem / @baseFont);
  height: (100rem / @baseFont);
  background-color: #fff;
  a {
    flex: 1;
    width: (150rem / @baseFont);
    height: 100%;
    text-align: center;
    [class^="tab-img"] {
      margin: auto;
      margin-top: (10rem / @baseFont);
      width: (48rem / @baseFont);
      height: (48rem / @baseFont);
      background-image: url(../img/tab_sprites.png);
      background-repeat: no-repeat;
      background-size: (48rem / @baseFont);
    }
  }
}

.tab-img-shouye {
  background-position: 0 0;
}
.tab-img-fenlei {
  background-position: 0 (-48rem / @baseFont);
}
.tab-img-paihang {
  background-position: 0 (-48rem / @baseFont * 2);
}
.tab-img-cart {
  background-position: 0 (-48rem / @baseFont * 3);
}
.tab-img-wode {
  background-position: 0 (-48rem / @baseFont * 4);
}

.tab-title {
  font-size: (20rem / @baseFont);
  color: #000;
}

.tab-title-shouye {
  font-weight: 700;
}